                                          <!-- 底部导航栏组件 -->

<!-- 传入属性 -->
<!-- bottownList:渲染数组 (img:未选中时展示图标  clickImg:选中时展示图标  title：标题  url：跳转地址)
        示例:[{ img: "", clickImg: "", title: "首页", url: "" }]
		
    defaultIndex:默认选择位置  默认0
    bottownHeight:自定义高度  默认120  单位rpx
    bottownItemWidth:内部成员集中区域宽度  默认600  单位rpx
    bottownItemHeight:内部成员集中区域高度  默认120  单位rpx -->

<!-- 传入方法 -->
<!-- bottownNavigation：父组件传递函数 传递位置信息index  跳转地址url -->

<template>
    <div
        class="bottownNavigationBar"
        :style="{ height: bottownHeight + 'rpx' }"
    >
        <!-- 内部成员集中区域 -->
        <!-- --------------------------------------------------------------------------------------------------------------- -->
        <div
            class="bottownNavigationBar-show"
            :style="[
                { height: bottownItemHeight + 'rpx' },
                { width: bottownItemWidth + 'rpx' },
            ]"
        >
            <!-- 内部成员 -->
            <div
                class="bottownNavigationBar-show-item"
                :class="{ clickChange: index == bottownIndex ? true : false }"
                v-for="(value, index) in bottownList"
                :key="index"
                @click="bottownClick(index, value.url)"
            >
                <!-- 图标（未点击时） -->
                <div
                    class="bottownNavigationBar-show-img"
                    :style="{ backgroundImage: 'url(' + value.img + ')' }"
                    v-show="index != bottownIndex"
                ></div>

                <!-- 图标（点击切换时） -->
                <div
                    class="bottownNavigationBar-show-img"
                    :style="{ backgroundImage: 'url(' + value.clickImg + ')' }"
                    v-show="index == bottownIndex"
                ></div>

                <!-- 标题 -->
                <div class="bottownNavigationBar-show-title">
                    {{ value.title }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        // 渲染数组 (img:未选中时展示图标  clickImg:选中时展示图标  title：标题  url：跳转地址)
        bottownList: {
            type: [Array],
            default() {
                return [
                    {
                        img: 'https://oss4.komect.com/equity-home/h5/20211123首页-黑白.png',
                        clickImg:
                            'https://oss4.komect.com/equity-home/h5/20211123首页.png',
                        title: '首页',
                        url: '../../pages/smartHomeService/smartHomeService',
                    },
                    {
                        img: 'https://oss4.komect.com/equity-home/h5/20211123分类-黑白.png',
                        clickImg:
                            'https://oss4.komect.com/equity-home/h5/20211123分类.png',
                        title: '分类',
                        url: '../../pages/classificationSearch/classification',
                    },
                    {
                        img: 'https://oss4.komect.com/equity-home/h5/20211123酒杯-黑白.png',
                        clickImg:
                            'https://oss4.komect.com/equity-home/h5/20211123酒杯.png',
                        title: '直约',
                        url: '../../pages/classificationSearch/classification',
                    },
                ];
            },
        },

        // 默认选择位置  默认0
        defaultIndex: {
            type: [String, Number],
            default: 0,
        },

        // 自定义高度  默认120  单位rpx
        bottownHeight: {
            type: [String, Number],
            default: 120,
        },

        // 内部成员集中区域宽度  默认550  单位rpx
        bottownItemWidth: {
            type: [String, Number],
            default: 550,
        },

        // 内部成员集中区域高度  默认80  单位rpx
        bottownItemHeight: {
            type: [String, Number],
            default: 80,
        },
    },
    data() {
        return {
            // 点击位置信息
            bottownIndex: 0,
        };
    },
    created() {
        //   同步默认信息
        this.bottownIndex = this.defaultIndex;
    },
    methods: {
        //   成员点击函数
        bottownClick(index, url) {
            //   同步点击位置信息
            this.bottownIndex = index;

            // 跳转至到家服务首页
            uni.navigateTo({
                url: url,
            });

            //   父组件传递函数 传递位置信息index  跳转地址url
            this.$emit('bottownNavigation', {
                index: index,
                url: url,
            });
        },
    },
};
</script>

<style scoped>
/* 底部导航栏 */
.bottownNavigationBar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #ffffff;
    box-shadow: 0rpx -4rpx 16rpx 0rpx rgba(0,0,0,0.03); 
    font-size: 24rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 28rpx;
}

/* 成员集中区域 */
/* ------------------------------------------------------------------------------------------- */
.bottownNavigationBar-show {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* 成员样式 */
/* ===================================================== */
.bottownNavigationBar-show-item {
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
}

/* 图标样式 */
.bottownNavigationBar-show-img {
    height: 48rpx;
    width: 48rpx;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

/* 点击后切换样式 */
.clickChange {
    color: #30b88f;
}
</style>
